import React from 'react';
import ReactDOM from 'react-dom';
// 基础组件用法
function Component(){
  return <h1>I am Yuelei</h1>
}

class ES6Componont extends React.Component{
  render(){
    return <h1>I am Yuelei in Es6 </h1>
  }
}
// ReactDom有两个参数 第一个是组件，第二个是选择器（将组件渲染到选择器）
ReactDOM.render(
<div>
  <Component/>
  <ES6Componont/>
</div>
  ,
  document.getElementById('app')
);

// status$$props用法
// 定义组件
class Component extends React.Component{
    // 初始化
    constructor(props){
      super(props);
      this.state={
        name:'Yuelei'
      }
    }
    // 渲染
    render(){
       // 测试动态改变组件状态
      setTimeout(()=>{
       
        this.setState({
          name:'Yuelei Test'
        })
      },2000)
      // 返回组件
      return <h1>I am {this.state.name} in Es6 </h1>
    }
  }
// 事件写法1

class Component extends React.Component{
  constructor(props){
super (props);
this.state={
  name:'Yuelei',
  age:19
}
this.handleClick=this.handleClick.bind(this)
}
  handleClick(){
console.log('on click');
this.setState({
  age:this.state.age+1
})
  }
  render(){
return (
<div>
  <h1> I am {this.state.name}</h1>
  <p>I am {this.state.age}</p>
  <button onClick={this.handleClick}>加一岁</button>
</div>
);
  }
}

// 事件写法2
class Component extends React.Component{
  constructor(props){
super (props);
this.state={
  name:'Yuelei',
  age:19
}
}
  handleClick(){
console.log('on click');
this.setState({
  age:this.state.age+1
})
}
onValueChange(e){
this.setState({
  // e.target.value就是input的值 
  age:e.target.value
})
}
  render(){
return (
<div>
  <h1> I am {this.state.name}</h1>
  <p>I am {this.state.age}</p>
  {/* 利用箭头函数修正时间作用域 */}
  <button onClick={(e)=>this.handleClick(e)}>加一岁</button>
  <input type="text" onChange={(e)=>this.onValueChange(e)}/>
</div>
);
  }
}

// 组件的组合方式


class Component extends React.Component{
  constructor(props){
super (props);
this.state={
  name:'Yuelei',
  age:19
}
}
  handleClick(){
console.log('on click');
this.setState({
  age:this.state.age+1
})
}
onValueChange(e){
this.setState({
  // e.target.value就是input的值 
  age:e.target.value
})
}
  render(){
return (
<div>
  <h1> I am {this.state.name}</h1>
  <p>I am {this.state.age}</p>
  {/* 利用箭头函数修正时间作用域 */}
  <button onClick={(e)=>this.handleClick(e)}>加一岁</button>
  <input type="text" onChange={(e)=>this.onValueChange(e)}/>
</div>
);
  }
}
// 容器式 组件
class Title extends React.Component{
  constructor(props){
    super(props);
  }
  render(props){
    return(
      <h1>{this.props.children}</h1>
    );
  }
}
// 组件b
class App extends React.Component{
render(){
  return(
    <div className="">
    {/* 容器式组件 */}
   <Title>
     <span>test</span>
     <h1>React</h1>
   </Title>
    <hr/>
    {/* 单纯组件引用 */}
<Component/>
    </div>
  );
}
}

// 状态提升兄弟组件数据通信

// 组件1
class Child1 extends React.Component{
  constructor(props){
super (props);

}
  handleClick(){
console.log('on click');
this.props.changeChild2Color('red')

}

  render(){
return (
<div>
 
 <h1>child1</h1>
  {/* 利用箭头函数修正时间作用域 */}
  <button onClick={(e)=>this.handleClick(e)}>改变child2组件颜色</button>
 
</div>
);
  }
}
// 组件2
class Child2 extends React.Component{
  constructor(props){
super (props);

}
render(){
return (
<div style={{background:this.props.bgColor}}>
 
 <h1>child2:{this.props.bgColor}</h1>
  {/* 利用箭头函数修正时间作用域 */}
</div>)
  }
}


// 父组件
class Father extends React.Component{
  constructor(props){
    super(props);
    this.state={
      child2bgColor:'#eee'
    }
  }
  changeChild2Color(color){
this.setState({
  child2bgColor:color
})

  }
  render(props){
    return(
<div >
{/* 创建函数回调 */}
<Child1 changeChild2Color={(color)=>{this.changeChild2Color(color)}} />
<Child2 bgColor={this.state.child2bgColor}/>
</div>

    
    );
  }
}





  // ReactDom有两个参数 第一个是组件，第二个是选择器（将组件渲染到选择器）
  ReactDOM.render(
  <div>
    <Component/>
  
  </div>
    ,
    document.getElementById('app')
  );
